<script setup lang="ts">
import type { MessageBox } from '@/types/notify';
defineProps<{
  item:MessageBox
}>()
const emit=defineEmits<{
  (e:'on-click',id:string):void
}>()
</script>

<template>
  <div class="message-item-page" @click="emit('on-click',item.id)">
    
    <div class="head">
        <van-badge :content="item.number" :offset="[-16,8]" :show-zero="false">
          <van-image
            round
            class="avatar"
            :src="item.avatar"
          ></van-image>
        </van-badge>
        <div class="info">
          <p class="name">{{item.title}}</p>
          <p class="dep van-ellipsis">{{ item.content }}</p>
        </div>
        <text class="text">{{ item.createTime }}</text>
    </div>
    <div class="box"></div>

  </div>
</template>

<style lang="scss" scoped>
.message-item-page{
  margin-bottom: 20px;
  overflow: hidden;
  .head {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .avatar {
      width: 45px;
      height: 45px;
      margin-right: 10px;
    }
    .info {
      width: 210px;
      padding-right: 10px;
      .name {
        color: var(--cp-text2);
        font-size: 16px;
        margin-bottom: 4px;
      }
      .dep {
        color: var(--cp-tip);
        font-size: 12px;
      }
    }
    .text{
      font-size: 14px;
      color: #c3c3c5;
      text-align: right;
    }

  }
  .box{
      width: 100%;
      border-bottom: 1px solid #e8e8e9;
      margin: 10px auto  0;
  } 
}

  
</style>
